<template>

    <el-main>
      <div class="login" style="padding-top: 67px;">
        <div style="text-align:center;margin-bottom:20px;">
          <img src="../../assets/img/login_logo.png" style="width:500px;font-size:9pt;">
        </div>
        <div class="boxSMMSLogin" style="
    padding-top: 20px">
          <el-form :model="account" status-icon ref="loginForm" :rules="rules"  label-width="70px" class="demo-ruleForm">
            <div class="s0">
              门店主数据管理平台
            </div>
            <el-form-item  label="账 户:" prop="userAccount">
              <el-input  type="account" v-model="account.userAccount" ></el-input>
            </el-form-item>
            <el-form-item  label="密 码:" prop="pwd">
               <el-input type="passWord" v-model="account.pwd" ></el-input>
            </el-form-item>
            <el-form-item  class="checkCode" label="验证码:" prop="code">
              <el-input  type="checkCode" @input="codeChange" v-model="account.code"></el-input>
              <valid-code  style="display:inline-flex;width: 86px" @input="validCode" ref="code" @click="refreshCode"></valid-code>
            </el-form-item>
            <el-form-item>
              <el-button  class="logSubmit" type="handleSubmit"  @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
</template>

<script>

  import {setToken} from "../../util";
  import ValidCode from "../common/ValidCode";
  let Base64 = require('js-base64').Base64
  export default {
      name:'login',
      components: {ValidCode},
      data(){
          const checkCode = (rule, value, callback) => {
              if (value !== '') {
                  if (value.toLowerCase()!=this.trueCode.toLowerCase()) {
                      callback(new Error('验证码错误'))
                  } else {
                      callback()
                  }
              } else {
                  callback(new Error('请输入验证码'))
              }
          }
          return{
              account:{
                  userAccount:'',
                  pwd:'',
                  code:''
              },
              logining:false,
              rules: {
                  userAccount: [
                      {required: true, message: '请输入用户名', trigger: 'blur'},
                  ],
                  pwd: [
                      {required: true, message: '请输入密码', trigger: 'blur'},
                  ],
                  code:[
                      {required:true,validator:checkCode,trigger:'blur'}
                  ]
              },
              trueCode:'',
              userName:''
          }
      },
      methods:{
          handleSubmit() {
              this.account.userPwd = Base64.encode(this.account.pwd)
              this.$http.post(this.$api.API_LOGIN,this.account).then(resp=>{
                  setToken(resp.token)
                  // localStorage.setItem("menu",JSON.stringify(resp.items))
                  // localStorage.setItem("userinfo",JSON.stringify(resp.userInfo))
                  window.location.href = '/home.htm'
              },msg=>{})
          },
          validCode(code){
              this.trueCode = code
          },
          refreshCode() {
              this.$refs.code.refreshCode()
          },
          codeChange(val){
              if (val.length == 4) {
                  this.$refs.loginForm.validate((valid) => {
                      if (valid) {
                          this.handleSubmit()
                      } else {
                         this.$message.error("登录错误")
                          this.refreshCode()
                      }
                  });
              }
          },
          getUrlParam:function(name) {
              var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
              var r = window.location.search.substr(1).match(reg);
              if (r != null) return unescape(r[2]);
              return null;
          },
          ssoLogin() {
              let param = {system: 2, userAccount: escape(Decrypt(this.userName))}
              this.$http.get(this.$api.API_SSO_LOGIN, param).then(resp => {
                  setToken(resp.token)
                  // localStorage.setItem("menu",JSON.stringify(resp.items))
                  // localStorage.setItem("userinfo",JSON.stringify(resp.userInfo))
                  window.location.href = '/home.htm'
              })
          }
      },
      created() {
          this.userName = this.getUrlParam("name")
          if (this.userName) {
              this.ssoLogin()
          }
      }
  }

</script>
<style lang="less" scoped>
  .s0 {
    width: 100%;
    text-align: center;
    color: red;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  /deep/.el-form-item__content {
    margin-left:0px !important;
  }

  .login{
      padding-top: 37px;
  }
  .boxSMMSLogin {
    width: 502px;
    margin: 0 auto;

    border: 1px solid #A8A8A8;
    border-radius: 10px 10px;
    color: #000000;
    position: relative;
    background-color: #fff;
  }

  .el-form{
    text-align: center;
  }

  .el-form-item{
    display: flex;
    justify-content: center;
  }

  .el-button{
    width: 130px;
    cursor: pointer;
    background-color: #d51900;
    border: 1px solid #d51900;
    border-radius: 5px 5px;
    color: #fff;
    /deep/span{
      font-size: 20px !important;
    }
  }

  .checkCode{
    /deep/.el-form-item__content{
      text-align: left;
    }
    .el-input{
      width:90px
    }
  }

  </style>
